<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>专家管理</title>
        <link href="/assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
        <link rel="stylesheet" href="/assets/module/admin.css?v=318"/>

        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/assets/js/common.js?v=318"></script>
        <style>
            .layui-table-box {
                margin-bottom: 10px;
            }

            .layui-table-page {
                position: relative;
            }
        </style>
    </head>
</header>
<body>
<div>
    <div class="layui-card">
        <div class="layui-card-header" style="padding: 10px">
            <form class="layui-form">
                <div class="layui-form-item">
                    <!-- 姓名 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">专家姓名</label>
                        <div class="layui-input-inline">
                            <input id="tbName" type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 单位 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">单位</label>
                        <div class="layui-input-inline">
                            <input id="tbDepartment" type="text" name="department" placeholder="请输入单位" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 职称 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">职称</label>
                        <div class="layui-input-inline">
                            <input id="tbTitle" type="text" name="title" placeholder="请输入职称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 按钮区域 -->
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: auto;">
                            <button id="search" class="layui-btn" lay-submit="" lay-filter="searchForm">
                                <i class="layui-icon layui-icon-search"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <div style="margin: 20px;">
                <button id="add" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-add-1"></i> 新增专家</button>
                <button id="batchImport" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-upload">
                    <input type="file" id="excelFile" accept=".xlsx, .xls" style="display: none;" />
                </i> 批量导入专家数据</button>
            </div>
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
            <div class="layui-table-page"></div> <!-- 将分页栏放置在这里 -->

            <script type="text/html" id="barTable">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reset_password">重置密码</a>
            </script>

            <script th:inline="none">
                layui.use(['table', 'form', 'layer'], function () {
                    var $ = layui.jquery;
                    var layer = layui.layer;
                    var form = layui.form;
                    var table = layui.table;

                    table.render({
                        elem: '#tableList',
                        url: '/expert/list',  // 专家列表的后端接口
                        defaultToolbar: ['filter', 'exports', 'print', {
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        title: '专家数据',
                        cols: [[
                            {
                                title: '序号', width: 50, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1
                                }
                            },
                            {field: 'userName', title: '用户名', width: 120},
                            {field: 'name', title: '专家姓名', width: 120},
                            {field: 'department', title: '单位', width: 200},
                            {field: 'title', title: '职称', width: 200},
                            {field: 'tel', title: '电话', width: 200},
                            {field: 'email', title: '电子邮件', width: 200},
                            {fixed: 'right', title: '操作', toolbar: '#barTable', width: 200}
                        ]],
                        page: true,
                        limit: 50,
                        limits: [50, 100, 150, 200],
                        id: 'tableList'
                    });

                    // 搜索功能
                    $('#search').click(function () {
                        var name = $('#tbName').val();
                        var department = $('#tbDepartment').val();
                        var title = $('#tbTitle').val();
                        // var index = layer.msg('查询中，请稍后...', {
                        //     icon: 16,
                        //     time: false,
                        //     shade: 0
                        // });
                        var whereParams = {
                            name: name,
                            department: department,
                            title: title
                        };
                        setTimeout(function () {
                            table.reload('tableList', {
                                url: '/expert/list',
                                method: 'post',
                                data: JSON.stringify(whereParams),
                                page: {
                                    curr: 1  // 从新从第一页开始
                                }
                            });
                            // layer.close(index);
                        });
                    });

                    // 监听工具条
                    table.on('tool(tableList)', function (obj) {
                        var data = obj.data;
                        if (obj.event == 'del') {
                            var postData = {id: data.id};
                            layer.confirm('真的要删除该数据吗？', function (index) {
                                $.ajax({
                                    type: 'POST',
                                    url: "/expert/del",
                                    data: postData,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code == 0) {
                                            $('#search').click();
                                            layer.msg(res.msg);
                                        } else {
                                            layer.msg(res.msg, {
                                                icon: 2,
                                                anim: 6
                                            });
                                        }
                                    }
                                });
                                layer.close(index);
                            });
                        } else if (obj.event == 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑专家',
                                fixed: false,
                                maxmin: false,
                                area: ['800px', '300px'],
                                content: '/expert/form?id=' + data.id
                            });
                        }
                    });

                    // 新增专家
                    $('#add').click(function () {
                        layer.open({
                            type: 2,
                            title: '新增专家',
                            fixed: false,
                            maxmin: true,
                            area: ['800px', '300px'],
                            content: '/expert/form?id=0'
                        });
                    });

                    // 批量导入
                    $('#batchImport').click(function () {
                        document.getElementById('excelFile').click();
                    });

                    $('#excelFile').change(function () {
                        var file = this.files[0];
                        if (!file) {
                            layer.msg('请选择一个文件上传！');
                            return;
                        }
                        var formData = new FormData();
                        formData.append('file', file);

                        // 发送文件到后端
                        $.ajax({
                            url: '/expert/batchImport',
                            type: 'POST',
                            data: formData,
                            processData: false,  // 不对数据进行处理
                            contentType: false,  // 不设置内容类型
                            success: function (res) {
                                if (res.code == 0) {
                                    $('#search').click();
                                    layer.msg('导入成功！共导入 ' + res.data + ' 条数据。', {
                                        icon: 1,
                                        time: 1500
                                    });
                                } else {
                                    layer.msg('上传失败：' + res.msg, { icon: 2 });
                                }
                            },
                            error: function () {
                                layer.msg('上传失败，请稍后重试！', { icon: 2 });
                            },
                            complete: function () {
                                // 上传完成后重置文件控件
                                $('#excelFile').val('');
                            }
                        });
                    })

                })
            </script>


        </div>
    </div>
</div>

<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>
</html>